<template>
  <view class='order-submission'>
  <orderGoods :tripInfo="tripInfo" :is_confirm='true'></orderGoods>
    <view class='wrapper'>
      <view class="item-type">
        预订人信息
        <span style="font-size: 24rpx;">(用于接受订单反馈)</span>
      </view>
      <view class="item acea-row row-between-wrapper">
        <view>联系人</view>
        <view class="discount">
          <input style="text-align: right;" v-model="contactsName" type="text" :placeholder="'请输入姓名'"
                 placeholder-class="placeholder"></input>
        </view>
      </view>
      <view class="item acea-row row-between-wrapper">
        <view>联系电话</view>
        <view class="discount">
          <input style="text-align: right;" v-model="contactsTel" type="text" :placeholder="`请输入手机号`"
                 placeholder-class="placeholder"></input>
        </view>
      </view>
      <view class="item-type" style="border-bottom: 1px solid #f0f0f0;">
        出行信息
        <span style="font-size: 24rpx;">(用于购买保险或入住酒店)</span>
        <span class="add-user" @click="travelersShow(1)">选择出行人信息</span>
        <view class="useContactBox" v-for="(item, index) in contactLists">
          <svg @click="delContactItems(index)" t="1688614226327" class="delContact" viewBox="0 0 1024 1024"
               version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2857" style="width: 32rpx;height: 32rpx;" width="32rpx" height="32rpx">
            <path
                d="M646.022677 512.096136l350.142243-350.142244c36.857078-36.857078 36.857078-96.74983 0-134.118812s-96.74983-36.857078-134.118812 0L511.903864 377.977323 161.761621 27.83508c-36.857078-36.857078-96.74983-36.857078-134.118812 0-36.857078 36.857078-36.857078 96.74983 0 134.118812L377.785052 512.096136 27.642809 862.238379c-36.857078 36.857078-36.857078 96.74983 0 134.118812 36.857078 36.857078 96.74983 36.857078 134.118812 0l350.142243-350.142243 350.142244 350.142243c36.857078 36.857078 96.74983 36.857078 134.118812 0 36.857078-36.857078 36.857078-96.74983 0-134.118812L646.022677 512.096136z"
                fill="#EFEFEF" p-id="2858"></path>
          </svg>
          <view class="use_contact">
            用户名称：{{ item.name }}
          </view>
          <view class="use_contact">
            联系电话：{{ item.phone }}
          </view>
          <view class="use_contact">
            身份证号：{{ item.identity_no }}
          </view>
        </view>
        <view class="useContactAdd" @click="addContact(1)">
          <image src="@/static/images/jia.png" style="width: 76rpx;height: 76rpx;"></image>

        </view>
      </view>

      <view class="useContactShow" v-if="Travelers.display" style="transition: opacity 600ms;"
            :style="{ opacity: Travelers.opacity }">
        <view class="useContactBack"></view>
        <view class="useContactContent">
          <view class="useContactTitle">选择出行人信息</view>
          <view class="useContactForm">
            <view class="useContactBox" style="width: 100%;" v-for="(item, index) in contactList"
                  @click="selectContact(index)" :style="{ border: item.border }">
              <svg @click="delContactItem(item.id)" t="1688614226327" class="delContact" viewBox="0 0 1024 1024"
                   version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2857" width="16" height="16">
                <path
                    d="M646.022677 512.096136l350.142243-350.142244c36.857078-36.857078 36.857078-96.74983 0-134.118812s-96.74983-36.857078-134.118812 0L511.903864 377.977323 161.761621 27.83508c-36.857078-36.857078-96.74983-36.857078-134.118812 0-36.857078 36.857078-36.857078 96.74983 0 134.118812L377.785052 512.096136 27.642809 862.238379c-36.857078 36.857078-36.857078 96.74983 0 134.118812 36.857078 36.857078 96.74983 36.857078 134.118812 0l350.142243-350.142243 350.142244 350.142243c36.857078 36.857078 96.74983 36.857078 134.118812 0 36.857078-36.857078 36.857078-96.74983 0-134.118812L646.022677 512.096136z"
                    fill="#EFEFEF" p-id="2858"></path>
              </svg>
              <view class="use_contact">
                用户名称：{{ item.name }}
              </view>
              <view class="use_contact">
                联系电话：{{ item.phone }}
              </view>
              <view class="use_contact">
                身份证号：{{ item.identity_no }}
              </view>
            </view>
          </view>
          <view class="useContactBtn">
            <button type="success" round size="mini" @click="selectedContact">添加</button>
            <button round size="mini" @click="travelersShow(0)">取消</button>
          </view>
        </view>
      </view>
      <view class="useContactShow" v-if="useContactShow.display" style="transition: opacity 600ms;"
            :style="{ opacity: useContactShow.opacity }">
        <view class="useContactBack"></view>
        <view class="useContactContent">
          <view class="useContactTitle">添加同行人</view>
          <view class="useContactForm">
            <view class="useContactFormItem">
              <view style="white-space: nowrap;">姓&emsp;&emsp;名：</view>
              <input size="mini" v-model="useContact.name" placeholder="姓名"></input>
            </view>
            <view class="useContactFormItem">
              <view style="white-space: nowrap;">手&emsp;&emsp;机：</view>
              <input size="mini" v-model="useContact.phone" placeholder="手机"></input>
            </view>
            <view class="useContactFormItem">
              <view style="white-space: nowrap;">身份证号：</view>
              <input size="mini" v-model="useContact.identity_no" placeholder="身份证号"></input>
            </view>
            <view class="useContactFormItem">
              <view style="white-space: nowrap;">护&emsp;&emsp;照：</view>
              <input size="mini" v-model="useContact.passport_no" placeholder="护照（非必填）"></input>
            </view>
          </view>
          <view class="useContactBtn">
            <button type="success" round size="mini" @click="saveContact">添加</button>
            <button round size="mini" @click="addContact(0)">取消</button>
          </view>
        </view>
      </view>
      <view class='wrapper' v-if="confirm.length">
        <view class='item acea-row row-between-wrapper' v-for="(item,index) in confirm" :key="index">
          <view>
            <span v-if="item.status" style="color: red;">*</span>
            <span v-else style="marginLeft: 8px;"></span>
            {{ item.title }}
          </view>
          <!-- text -->
          <view v-if="item.label=='text'" class="confirm">
            <input type="text" :placeholder="`请填写`+' '+item.title" v-model="item.value"/>
          </view>
          <!-- number -->
          <view v-if="item.label=='number'" class="confirm">
            <input type="number" :placeholder="`请填写`+item.title" v-model="item.value"/>
          </view>
          <!-- email -->
          <view v-if="item.label=='email'" class="confirm">
            <input type="text" :placeholder="`请填写`+item.title" v-model="item.value"/>
          </view>
          <!-- data -->
          <view v-if="item.label=='data'" class="uni-list">
            <view class="uni-list-cell">
              <view class="uni-list-cell-db">
                <picker mode="date" :value="item.value" @change="bindDateChange($event,index)">
                  <view v-if="item.value == ''" class="fontC">{{ date + item.title }}
                    <text
                        class='iconfont icon-jiantou'></text>
                  </view>
                  <view v-else class="uni-input">{{ item.value }}</view>
                </picker>
              </view>
            </view>
          </view>
          <!-- time -->
          <view v-if="item.label=='time'">
            <view>
              <view>
                <picker mode="time" :value="item.value" start="00:00" end="23:59"
                        @change="bindTimeChange($event,index)">
                  <view v-if="item.value == ''" class="fontC">{{ time + item.title }}
                    <text
                        class='iconfont icon-jiantou'></text>
                  </view>
                  <view>{{ item.value }}</view>
                </picker>
              </view>
            </view>
          </view>
          <!-- id -->
          <view v-if="item.label=='id'" class="confirm">
            <input type="idcard" :placeholder="`请填写`+item.title" v-model="item.value"/>
          </view>
          <!-- phone -->
          <view v-if="item.label=='phone'" class="confirm">
            <input type="tel" :placeholder="`请填写`+item.title" v-model="item.value"/>
          </view>
          <!-- img -->
          <view v-if="item.label=='img'" class="confirmImg">
            <view class='list acea-row row-middle'>
              <view class='pictrue' v-for="(items,indexs) in item.value" :key="indexs">
                <image :src='items' class="img"></image>
                <text class='iconfont icon-guanbi1 font-num del' @click='DelPic(index,indexs)'></text>
              </view>
              <view class='pictrue acea-row row-center-wrapper row-column bor'
                    @click='uploadpic(index,item)' v-if="item.value.length < 8">
                <text class='iconfont icon-icon25201'></text>
                <view>上传图片</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class='moneyList'>
        <view class='item acea-row row-between-wrapper'>
          <view>商品总价：</view>
          <view class='money'>
            ￥{{ totalPrices }}
          </view>
        </view>

      </view>
      <view style='height:120rpx;'></view>
      <view class='footer acea-row row-between-wrapper'>
        <view>合计:
          <text class='font-color'>￥{{ totalPrices }}</text>
        </view>
        <view class='settlement' style='z-index:100' @tap.stop="SubOrder"
              v-if="(valid_count>0&&!discount_id) || (valid_count==tripInfo.length&&discount_id)">提交订单
        </view>
        <view class='settlement bg-color-hui' style='z-index:100' v-else>提交订单</view>
      </view>
    </view>
    <view class="alipaysubmit" v-html="formContent"></view>
    <!-- #ifdef MP -->
    <!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
    <!-- #endif -->
    <home v-show="!invShow"></home>
    <canvas canvas-id="canvas" v-if="canvasStatus"
            :style="{width: canvasWidth + 'px', height: canvasHeight + 'px',position: 'absolute',left:'-100000px',top:'-100000px'}"></canvas>
  </view>
</template>

<script>
import {orderConfirm} from '@/apis/order.js';
import orderGoods from '@/components/orderGoods/index.vue';

export default {
  components: {
    orderGoods,

  },
  data() {
    return {
      tripInfo: {},
      trip_id: 0,
      line_id: 0,
      confirm: [],
      valid_count: 0,
      discount_id: 0,
      formContent: '',
      canvasWidth: 0,
      canvasHeight: 0,
      totalPrices: 0,
      contactsName:'',
      contactsTel:'',

    };
  },
  onLoad(options) {
    if (!options.trip_id || !options.line_id) return this.$util.Tips({
      title: `请选择要购买的活动团期`
    }, {
      tab: 3,
      url: 1
    });
    this.trip_id = options.trip_id;
    this.line_id = options.line_id;
    this.getConfirm()
  },
  methods: {
    getConfirm: function () {
      let that = this;
      uni.showLoading({
        title: '正在加载中',
        mask: true
      });
      orderConfirm(that.trip_id, that.line_id).then(res => {
        that.$set(that, 'tripInfo', res.data.tripInfo);
        that.$set(that,'contactsName',res.data.order_contact.name);
        that.$set(that,'contactsTel',res.data.order_contact.phone);

        uni.hideLoading()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ uni-checkbox[disabled] .uni-checkbox-input {
  background-color: #eee;
}

.alipaysubmit {
  display: none;
}

.order-submission {
  /* #ifdef APP-PLUS */
  padding-bottom: 70rpx;
  /* #endif */
}

.order-submission .line {
  width: 100%;
  height: 3rpx;
}

.order-submission .line image {
  width: 100%;
  height: 100%;
  display: block;
}

.order-submission .address {
  padding: 28rpx 30rpx;
  background-color: #fff;
  box-sizing: border-box;
}

.order-submission .address .addressCon {
  width: 610rpx;
  font-size: 26rpx;
  color: #666;
}

.order-submission .address .addressCon .name {
  font-size: 30rpx;
  color: #282828;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.order-submission .address .addressCon .name .phone {
  margin-left: 50rpx;
}

.order-submission .address .addressCon .default {
  margin-right: 12rpx;
}

.order-submission .address .addressCon .setaddress {
  color: #333;
  font-size: 28rpx;
}

.order-submission .address .iconfont {
  font-size: 35rpx;
  color: #707070;
}

.order-submission .allAddress {
  width: 100%;
  background: linear-gradient(to bottom, var(--view-theme) 0%, #f5f5f5 100%);
  padding-top: 100rpx;
  margin-bottom: 12rpx;
}

.order-submission .allAddress .nav {
  width: 710rpx;
  margin: 0 auto;
}

.order-submission .allAddress .nav .item {
  width: 355rpx;
}

.order-submission .allAddress .nav .item.on {
  position: relative;
  width: 250rpx;
}

.order-submission .allAddress .nav .item.on::before {
  position: absolute;
  bottom: 0;
  content: "快递配送";
  font-size: 28rpx;
  display: block;
  height: 0;
  width: 336rpx;
  border-width: 0 20rpx 80rpx 0;
  border-style: none solid solid;
  border-color: transparent transparent #fff;
  z-index: 2;
  border-radius: 7rpx 30rpx 0 0;
  text-align: center;
  line-height: 80rpx;
}

.order-submission .allAddress .nav .item:nth-of-type(2).on::before {
  content: "到店自提";
  border-width: 0 0 80rpx 20rpx;
  border-radius: 30rpx 7rpx 0 0;
}

.order-submission .allAddress .nav .item.on2 {
  position: relative;
}

.order-submission .allAddress .nav .item.on2::before {
  position: absolute;
  bottom: 0;
  content: "到店自提";
  font-size: 28rpx;
  display: block;
  height: 0;
  width: 400rpx;
  border-width: 0 0 60rpx 60rpx;
  border-style: none solid solid;
  border-color: transparent transparent rgba(255, 255, 255, 0.6);
  border-radius: 40rpx 6rpx 0 0;
  text-align: center;
  line-height: 60rpx;
}

.order-submission .allAddress .nav .item:nth-of-type(1).on2::before {
  content: "快递配送";
  border-width: 0 60rpx 60rpx 0;
  border-radius: 6rpx 40rpx 0 0;
}

.order-submission .allAddress .address {
  width: 710rpx;
  height: 150rpx;
  margin: 0 auto;
}

.order-submission .allAddress .line {
  width: 710rpx;
  margin: 0 auto;
}

.order-submission .wrapper .item .discount .placeholder {
  color: #ccc;
}

.placeholder-textarea {
  position: relative;

  .placeholder {
    position: absolute;
    color: #ccc;
    top: 26rpx;
    left: 30rpx;
  }
}

.order-submission .wrapper {
  background-color: #fff;
  margin-top: 13rpx;
}

.order-submission .wrapper .item-type {
  padding: 27rpx 30rpx;
  font-size: 30rpx;
  color: #282828;

  .useContactAdd {
    width: 100%;
    height: 170rpx;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #EFEFEF;
    margin-top: 30rpx;
  }

  .add-user {
    z-index: 100;
    font-size: 24rpx;
    color: #fff;
    width: 120rpx;
    height: 35rpx;
    background-color: rgba(29, 176, 252, 1);
    border-radius: 10rpx;
    text-align: center;
    line-height: 35rpx;
    float: right;
  }
}

.order-submission .wrapper .item {
  padding: 27rpx 30rpx;
  font-size: 30rpx;
  color: #282828;
  border-bottom: 1px solid #f0f0f0;

  .mark {
    background-color: #f9f9f9;
    // width: 345px;
    min-height: 70px;
    border-radius: 1px;
    margin-top: 15px;
    padding: 12px 14px;
    color: #ccc;
    font-size: 28rpx;
    box-sizing: border-box;
  }

  .mark-msg {
    color: #333;
    font-size: 28rpx;
  }
}

.order-submission .wrapper .item .discount {
  font-size: 30rpx;
  color: #999;
}

.order-submission .wrapper .item .discount input {
  text-align: end;
}

.order-submission .wrapper .item .discount .iconfont {
  color: #515151;
  font-size: 30rpx;
  margin-left: 15rpx;
}

.order-submission .wrapper .item .discount .num {
  font-size: 32rpx;
  margin-right: 20rpx;
}

.order-submission .wrapper .item .shipping {
  font-size: 30rpx;
  color: #999;
  position: relative;
  padding-right: 58rpx;
}

.order-submission .wrapper .item .shipping .iconfont {
  font-size: 35rpx;
  color: #707070;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 30rpx;
}

.order-submission .wrapper .item textarea {
  background-color: #f9f9f9;
  width: 100%;
  height: 135rpx;
  border-radius: 3rpx;
  margin-top: 30rpx;
  padding: 25rpx 28rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.order-submission .wrapper .item .placeholder {
  color: #ccc;
  font-size: 28rpx;
}

.order-submission .wrapper .item .list {
  margin-top: 35rpx;
}

.order-submission .wrapper .item .list .payItem {
  border: 1px solid #eee;
  border-radius: 6rpx;
  height: 86rpx;
  width: 100%;
  box-sizing: border-box;
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #282828;
}

.order-submission .wrapper .item .list .payItem.on {
  border-color: #fc5445;
  color: #e93323;
}

.order-submission .wrapper .item .list .payItem .name {
  width: 50%;
  text-align: center;
  border-right: 1px solid #eee;
  padding-left: 80rpx;
}

.order-submission .wrapper .item .list .payItem .name .iconfont {
  width: 44rpx;
  height: 44rpx;
  border-radius: 50%;
  text-align: center;
  line-height: 44rpx;
  background-color: #fe960f;
  color: #fff;
  font-size: 30rpx;
  margin-right: 15rpx;
}

.order-submission .wrapper .item .list .payItem .name .iconfont.icon-weixin2 {
  background-color: #41b035;
}

.order-submission .wrapper .item .list .payItem .name .iconfont.icon-zhifubao {
  background-color: #1677FF;
}

.order-submission .wrapper .item .list .payItem .tip {
  width: 49%;
  text-align: center;
  font-size: 26rpx;
  color: #aaa;
}

.order-submission .moneyList {
  margin-top: 12rpx;
  background-color: #fff;
  padding: 30rpx;
}

.order-submission .moneyList .item {
  font-size: 28rpx;
  color: #282828;
}

.order-submission .moneyList .item ~ .item {
  margin-top: 20rpx;
}

.order-submission .moneyList .item .money {
  color: #868686;
}

.order-submission .footer {
  width: 100%;
  background-color: #fff;
  font-size: 28rpx;
  color: #333;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 15rpx 30rpx;
  padding-bottom: calc(15rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
  padding-bottom: calc(15rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
  z-index: 9;
}

.order-submission .footer .settlement {
  font-size: 30rpx;
  color: #fff;
  width: 240rpx;
  height: 70rpx;
  background-color: var(--view-theme);
  border-radius: 50rpx;
  text-align: center;
  line-height: 70rpx;
}

.footer .transparent {
  opacity: 0
}

.confirm {
  text-align: right;
  font-size: 22rpx;
}

.confirmImg {
  width: 100%;

  .img {
    width: 136rpx;
    height: 136rpx;
  }

  .pictrue {
    width: 136rpx;
    height: 136rpx;
    box-sizing: border-box;
    margin: 18rpx;
    margin-bottom: 35rpx;
    position: relative;
    font-size: 22rpx;
    color: #bbb;

    .del {
      position: absolute;
      top: 0;
      right: 0;
    }
  }

  .bor {
    border: 1rpx solid #ddd;
  }

}

.fontC {
  color: grey;
}

.useContactShow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.useContactBack {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #28282885;
}

.useContactContent {
  position: absolute;
  background-color: white;
  padding: 12px 22px;
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 300px;
  max-height: 436px;
  overflow-y: scroll;
}

.useContactContent::-webkit-scrollbar {
  display: none;
}

.useContactTitle {
  width: 100%;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}

.useContactForm {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding-top: 10px;
}

.useContactFormItem {
  width: 100%;
  display: flex;
  align-items: center;
  margin: 5px 0;
  font-size: 12px;
}

.useContactBtn {
  margin-top: 10px;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}

.useContactBox {
  border: 1px solid #EFEFEF;
  border-radius: 8px;
  margin-bottom: 12px;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.delContact {
  right: 10px;
  top: 10px;
  position: absolute;
  cursor: pointer;
}
</style>
